<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>w1001_1_dom</title>
      <style>
      </style>
      <script>
      /*-DOM(Document Object Model)-----------------------
       *: 웹 브라우저가 (HTML)페이지를 인식하는 방법
       *: Document객체와 관련된 객체의 집합
       * 특정객체접근.조작(추가,수정,삭제)
       
      //특정요소에 접근
      document.getElementsByClassName("txt01")[0];
      window.document.forms[0].elements[0];
      window.document.frm1.userName;
      document.getElementById("userName");
      document.getElementsByName("userName")[0];
     document.getElementsByTagName("input")[0];
   
     //생성
     document.createElement()    
      document.createTextNode()
      document.createAttribute() 
      document.createComment()
      
      //추가
      element.appendChild()    
   * */
   
       window.onload=function(){
          
          //img 요소생성 <img>
         var img=document.createElement("img");
          
          document.getElementById("btn01").onclick=function(){
      /*   //속성조작1................................
            img.src="images/etc/img3.jpg";
            img.width="500";*/
            
            //속성조작2................................
            //element.setAttribute(attributename,attributevalue)
            img.setAttribute("src","../images/etc/img_navsprites.gif");
            img.setAttribute("width",300);
            
            //생성한 img요소를 body요소에 추가
            window.document.body.appendChild(img);
          };
          
          //이미지 삭제..element.removeChild()
          document.getElementById("btn02").onclick=function(){
             document.body.removeChild(img);
          };
               
         document.getElementById("btn03").onclick=function(){
            
            var imgW = document.getElementById("imgwidth").value;
            img.setAttribute("width",img);
         };
         
         // 이미지 조작..
         document.getElementById("btn04").onmouseover=function(){
        	 //radio 객체 모든 요소 접근

        	 var ele=document.getElementsByName("imgWidths");
        	 //선택되었으면 해당 요소의 값을 가져와
        	 
        	 for(i=0;i<ele.length;i++){
        		 if(ele[i].checked){
        			 alert(ele[i].value);
            		 //이미지 객체의 너비속성에 반영.
        		 }

        	 }
         };

       };//end of window.onload
      </script>
   </head>
   <body>
      <button id="btn01">img넣기</button>
      <button id="btn02">img빼기</button>
      <hr />
      <button id="btn03">img조작</button><br />
      *너비 : 
      <input type="text" name="imgwidth" id="imgwidth" size="3" maxlength="3"/><br/>
      
      <input type="radio" name="imgWidths1" value="100" id="imgWidths1"/>
      <label for="imgWidths1">100</label>
      <input type="radio" name="imgWidths2" value="200" id="imgWidths2"/>
      <label for="imgWidths2">200</label>
      <input type="radio" name="imgWidths3" value="300" id="imgWidths3"/>
      <label for="imgWidths3">300</label>
      <button id="btn04">img조작</button><br />
   </body>
</html>








